import React, { useState } from 'react';

import { Container, Header, Segment, Form, Grid, Image, Divider, Button } from "semantic-ui-react";
import "./App.css";
import students, { Student } from "../data/data";
import 'semantic-ui-css/semantic.min.css'
let _schools: Set<string> = new Set();
let _provinces: Set<string> = new Set();
for (let item of students) {
  _schools.add(item.school.name);
  _provinces.add(item.school.province);
}

let schools = [..._schools.keys()];
let provinces = [..._provinces.keys()];

console.log("Student count:", students.length);
console.log("Public URL:", process.env.PUBLIC_URL);
document.title = "高2017级1班毕业去向查询";
students.sort((a, b) => {
  if (a.school.province === b.school.province) {
    return a.school.name.localeCompare(b.school.name);
  } else {
    return a.school.province.localeCompare(b.school.province);
  }
});
const App: React.FC<{}> = () => {
  const [filter, setFilter] = useState<{
    name: string;
    province: string;
    school: string;
  }>({
    name: "",
    province: "",
    school: ""
  });
  const makeDisplayList = () => {
    return students.filter(item => {
      if (filter.name !== "" && !item.name.includes(filter.name)) return false;
      if (filter.province !== "" && item.school.province !== filter.province) return false;
      if (filter.school !== "" && !item.school.name.includes(filter.school)) return false;
      return true;
    });
  };
  const [showing, setShowing] = useState<Array<Student>>(makeDisplayList());

  const apply = () => {
    setShowing(makeDisplayList());
  };
  return <Container>
    <Header as="h1">
      高2017级1班毕业去向查询
    </Header>
    <Segment stacked>
      <Form>
        <Form.Field>
          <label>按姓名搜索</label>
          <input placeholder="留空以不筛选姓名.." onChange={e => setFilter({ ...filter, name: e.target.value })}></input>
        </Form.Field>
        <Form.Field>
          <label>按省份搜索</label>
          <input placeholder="留空以不筛选省份.." onChange={e => setFilter({ ...filter, province: e.target.value })} list="provinces"></input>
          <datalist id="provinces">
            {/* <option value={""}>不筛选</option> */}
            {provinces.map(item => <option value={item} key={item}>{item}</option>)}
          </datalist>
        </Form.Field>
        <Form.Field>
          <label>按学校搜索</label>
          <input placeholder="留空以不筛选学校.." onChange={e => setFilter({ ...filter, school: e.target.value })} list="schools"></input>
          <datalist id="schools">
            {/* <option value={""}>不筛选</option> */}
            {schools.map(item => <option value={item} key={item}>{item}</option>)}
          </datalist>
        </Form.Field>
        <Form.Button onClick={apply}>
          搜索
        </Form.Button>
        <Button as="a" href="./files/cfdt.png" target="_blank" color="red">
          蹭饭地图
        </Button>
        <Button as="a" href="./files/cfdt_tr.png" target="_blank" color="red">
          蹭饭地图(by 戳儿)
        </Button>

      </Form>
    </Segment>
    <Segment stacked>
      <Grid columns="2">
        {showing.length === 0 ? (<Container textAlign="center">没有搜索到相关结果</Container>) : showing.map((item) => {
          return <Grid.Column key={item.name}>
            <Grid columns="2">
              <Grid.Column width="6">
                <Image size="small" src={"./image/" + item.school.image || "./image/unknown.png"}></Image>
              </Grid.Column>
              <Grid.Column width="10">
                <Header as="h3">
                  {item.name}
                </Header>
                <Header as="h3">
                  {item.school.name}
                </Header>
                <Form>
                  <Form.Field>
                    <label>电话</label>
                    <span>{item.phone}</span>
                  </Form.Field>
                  <Form.Field>
                    <label>学校省份</label>
                    <span>{item.school.province}</span>
                  </Form.Field>
                  <Form.Field>
                    <label>学校城市</label>
                    <span>{item.school.city}</span>
                  </Form.Field>
                </Form>
              </Grid.Column>
            </Grid>
            <Divider></Divider>
          </Grid.Column>;
        })}
      </Grid>

    </Segment>
    <Container textAlign="center" style={{
      color: "darkgrey"
    }}>
      by MikuNotFoundException
    </Container>
  </Container>
};

export default App;